// 带input的color-picker
import { InputNumber, /*Slider */ } from 'antd';
import React, { useEffect, useState } from 'react';
import FormItem from 'antd/lib/form/FormItem';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
	layoutConfig: Array<any>;
	layoutConfChange: ( config ) => void;
}

const ChartsSize = ( props: IProps ) => {
	const { config, layoutConfig, layoutConfChange } = props;

	const [ width, setWidth ] = useState( 0 );
	const [ height, setHeight ] = useState( 0 );

	// const marks = {
	// 	0: '0',
	// 	24: '24',
	// 	48: '48'
	// };

	useEffect( () => {
		const item = layoutConfig.find( v => v.i === config.key );
		if ( !item ) return;
		setWidth( item.w );
		setHeight( item.h );
	}, [ layoutConfig, config ] );

	const onWidthEvent = ( event ) => {
		event.persist();
		console.log( event );
		onWidthBlur( event.target.value );
	};

	const onHeightEvent = ( event ) => {
		event.persist();
		onHeightBlur( event.target.value );
	};

	const onWidthBlur = ( value ) => {
		setLayoutConfig( { w: value } );
	};

	const onHeightBlur = ( value ) => {
		setLayoutConfig( { h: value } );
	};

	// const onHeightStep = ( value ) => {
	// 	setLayoutConfig( { h: value } );
	// }; 

	const setLayoutConfig = ( info ) => {
		//	直接修改layoutConfig,不在style中保存
		const layoutItem = layoutConfig.find( v => v.i === config.key );
		const newLayoutItem = Object.assign( {}, layoutItem );
		newLayoutItem.w = parseInt( info.w || layoutItem.w );
		newLayoutItem.h = parseInt( info.h || layoutItem.h );

		const newLayoutConfig = Array.from( layoutConfig );
		newLayoutConfig.splice( layoutConfig.findIndex( item => item.i === config.key ), 1, newLayoutItem );

		layoutConfChange( newLayoutConfig );
	};

	// console.log( width, height );

	return (
		<div>
			<FormItem label="宽度" labelAlign="left" labelCol={ { span: 8 } } wrapperCol={ { span: 16 } }>
				{/* <Slider marks={marks} max={48} /> */ }
				<InputNumber
					style={ { width: '100%' } } min={ 1 } max={ 48 } onBlur={ onWidthEvent } onPressEnter={ onWidthEvent }
					onStep={ onWidthBlur } placeholder="Enter生效, 最大48px" value={ width }/>
			</FormItem>
			<FormItem
				label="高度" labelAlign="left" labelCol={ { span: 8 } }
				wrapperCol={ { span: 16 } }>
				<InputNumber
					style={ { width: '100%' } } onBlur={ onHeightEvent } onPressEnter={ onHeightEvent } onStep={ onHeightBlur }
					min={ 1 }
					placeholder="Enter生效, 单位px" value={ height }/>
			</FormItem>
		</div>
	);
};

export default React.memo( ChartsSize );
